<template>
  <div class="wrapper example6-container">
    <!-- 返回区域 -->
    <div
      class="back-box"
      @click="$router.go(-1)"
    >返回</div>

    <!-- 标题区域 -->
    <h1 class="title-box">6、computed函数</h1>

    <!-- 实例区域 -->
    <div class="example6-box">
      <h1>一个人的信息</h1>
      <div class="name-item">
        <span>姓：</span>
        <input
          type="text"
          v-model="person.firstName"
        />
      </div>
      <div class="name-item">
        <span>名：</span>
        <input
          type="text"
          v-model="person.lastName"
        />
      </div>
      <div class="full-name-box">
        <span>全名：</span>
        <span>{{ person.fullName }}</span>
      </div>
      <div class="full-name-box">
        <span>全名：</span>
        <input
          type="text"
          v-model="person.fullName"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  name: 'Example6',
  setup() {
    // 数据
    const person = reactive({
      firstName: '张',
      lastName: '三'
    });

    // 计算属性——简写
    // person.fullName = computed(() => {
    //   return person.firstName + '-' + person.lastName;
    // });

    // 计算属性——完整写法
    person.fullName = computed({
      get() {
        return person.firstName + '-' + person.lastName;
      },
      set(value) {
        const nameArr = value.split('-');
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      }
    });

    return {
      person
    };
  }
};
</script>

<style lang="scss" scoped>
.example6-container {
  // 返回区域
  & > .back-box {
    width: 50px;
    height: 23px;
    line-height: 20px;
    text-align: center;
    background-color: #efefef;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #767676;
    border-radius: 4px;
    cursor: pointer;
  }

  // 标题区域
  & > .title-box {
    margin-bottom: 30px;
  }

  // 实例区域
  & > .example6-box {
    & > h1 {
      margin-bottom: 20px;
    }
    & > .name-item {
      margin-bottom: 20px;
    }
    & > .full-name-box {
      margin-bottom: 20px;
    }
  }
}
</style>
